npm run start [task runner] script 변경하여 한번에 실행시키기 (터미널 한개로) - jeonyeonkyu/fe-w3-shopping GitHub Wiki

npm run start 시에 터미널 한개로 한번에 자동 watch하기 (sass 컴파일, webpack 번들링, 서버 실행)

• 이전 포스팅에서 npm run start시에 한번에 묶어서 실행이 되게 하였는데 watch가 되지 않아 계속 서버를 껏다가 켰었다

• 그래서 이번에는 nodemon ,concurrently 를 이용하여 한번에 watch 하여 실행되게 하였다 (서버를 껏다킬 필요가 없어졌다) (～￣▽￣)～

방법

• npm install -g nodemon 노드몬을 전역에 설치 하고
• npm install concurrently concurrently를 설치하였다

• webpack 은 webpack.config.js에 watch: true로 바꾸었고 (자동 반영)

• sass는 package.json에서 --watch 속성을 주었다 (자동 반영)

• 그리고 서버를 실행할 때는 nodemon으로 실행했다 (자동 반영)

• 그리고 start 인 npm run start 시에 scss, webpack, 서버 실행을 하게 해놓았는데
• concurrently --kill-others-on-fail 로 하나라도 실패하면 모두 종료 시키고 한번에 묶어서 실행시켰다
• (concurrently는 &&로 하나씩 실행시키는게 아닌 옵션으로 한번에 묶어서 실행이 가능했다)
• 저렇게 하지 않으면 sass watch를 위한 터미널 하나, webpack을 watch하는 터미널 하나, 서버를 실행시키는 터미널 하나, 터미널이 총 세개가 필요했는데
• cuncurrently는 한번에 묶어서 실행이 가능하다 (～￣▽￣)～

추가로 현재 start 라인이 너무 길어서 스크립트로 바꿧다

• 먼저 tools 폴더안에 start.js 파일을 생성했고

• package.json안의 scripts에 있는 명령어를 start.js의 concurrently 커맨드에 적어놨다

• 옵션으로 killOthers (하나가 실패하면 모두 종료하기) 도 설정해두었다 참고

• 서버종료시에는 GoodBye Beemo World~!!를 찍어보았다 ㅎㅎ

• 현재는 tools/start.js를 실행시키면 된다

• 실행되는 화면

• 5초 뒤 종료하였다 (종료하기 전 상태는 scss, js, html이 수정되면 자동 반영이 된다)
• GoodBye Beemo World~!! 가 출력되는걸 볼 수 있다 (～￣▽￣)～